<template>
    <div class="execution-analysis">
      <!-- Metric Cards -->
      <el-row :gutter="20" class="metric-cards">
        <el-col :span="8">
          <div class="metric-card">
            <div class="metric-icon red">
              <i class="el-icon-warning"></i>
            </div>
            <div class="metric-content">
              <div class="metric-value">0</div>
              <div class="metric-label">未达标部门数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="metric-card">
            <div class="metric-icon red">
              <i class="el-icon-warning-outline"></i>
            </div>
            <div class="metric-content">
              <div class="metric-value">0</div>
              <div class="metric-label">部门延期数据</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="metric-card">
            <div class="metric-icon red">
              <i class="el-icon-user"></i>
            </div>
            <div class="metric-content">
              <div class="metric-value">0</div>
              <div class="metric-label">个人延期数据</div>
            </div>
          </div>
        </el-col>
      </el-row>
  
      <!-- Time Series Chart -->
      <div class="chart-card">
        <div class="chart-title">
          <span>部门达标完成趋势图</span>
          <div class="chart-actions">
            <el-radio-group v-model="timeRange" size="small">
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="month">月</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="line-chart" ref="lineChart"></div>
      </div>
  
      <!-- Department Analysis -->
      <div class="chart-card">
        <div class="chart-section">
          <div class="section-header">
            <span>部门执行达成分布</span>
            <div class="legend">
              <span class="legend-item">
                <span class="dot blue"></span>
                <span>未完成</span>
              </span>
              <span class="legend-item">
                <span class="dot green"></span>
                <span>已完成</span>
              </span>
            </div>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="pie-chart" ref="deptPieChart"></div>
            </el-col>
            <el-col :span="12">
              <div class="progress-section">
                <div class="progress-title">部门执行达成统计</div>
                <div class="progress-item">
                  <span class="label">平均完成率</span>
                  <el-progress 
                    :percentage="50"
                    :color="['#67C23A', '#409EFF']"
                    :format="() => ''"
                  ></el-progress>
                  <span class="value">50%</span>
                </div>
                <div class="progress-item">
                  <span class="label">部门完成率</span>
                  <el-progress 
                    :percentage="50"
                    :color="['#67C23A', '#409EFF']"
                    :format="() => ''"
                  ></el-progress>
                  <span class="value">50%</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
  
      <!-- Personal Analysis -->
      <div class="chart-card">
        <div class="chart-section">
          <div class="section-header">
            <span>个人执行达成分布</span>
            <div class="legend">
              <span class="legend-item">
                <span class="dot blue"></span>
                <span>未完成</span>
              </span>
            </div>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="pie-chart" ref="personalPieChart"></div>
            </el-col>
            <el-col :span="12">
              <div class="progress-section">
                <div class="progress-title">个人执行达成统计</div>
                <div class="progress-item">
                  <span class="label">平均完成率</span>
                  <el-progress 
                    :percentage="100"
                    color="#409EFF"
                    :format="() => ''"
                  ></el-progress>
                  <span class="value">100%</span>
                </div>
                <div class="progress-item">
                  <span class="label">部门完成率</span>
                  <el-progress 
                    :percentage="0"
                    color="#409EFF"
                    :format="() => ''"
                  ></el-progress>
                  <span class="value">0%</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  
  export default {
    name: 'ExecutionAnalysis',
    data() {
      return {
        timeRange: 'week',
        charts: []
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initCharts()
      })
    },
    beforeDestroy() {
      this.charts.forEach(chart => {
        chart.dispose()
      })
    },
    methods: {
      initCharts() {
        // Initialize Line Chart
        const lineChart = echarts.init(this.$refs.lineChart)
        const lineOption = {
          grid: {
            top: 40,
            right: 20,
            bottom: 40,
            left: 60
          },
          xAxis: {
            type: 'category',
            data: Array.from({length: 30}, (_, i) => `2024/${i+1}`),
            axisLine: {
              lineStyle: {
                color: '#E5E7EB'
              }
            }
          },
          yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value}%'
            },
            splitLine: {
              lineStyle: {
                color: '#E5E7EB'
              }
            }
          },
          series: [{
            data: Array.from({length: 30}, () => Math.floor(Math.random() * 100)),
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              color: '#1890FF'
            },
            itemStyle: {
              color: '#1890FF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(24,144,255,0.2)'
                }, {
                  offset: 1,
                  color: 'rgba(24,144,255,0)'
                }]
              }
            }
          }]
        }
        lineChart.setOption(lineOption)
  
        // Initialize Department Pie Chart
        const deptPieChart = echarts.init(this.$refs.deptPieChart)
        const deptPieOption = {
          series: [{
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            data: [
              { value: 50, name: '未完成', itemStyle: { color: '#409EFF' } },
              { value: 50, name: '已完成', itemStyle: { color: '#67C23A' } }
            ],
            label: {
              show: false
            }
          }]
        }
        deptPieChart.setOption(deptPieOption)
  
        // Initialize Personal Pie Chart
        const personalPieChart = echarts.init(this.$refs.personalPieChart)
        const personalPieOption = {
          series: [{
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            data: [
              { value: 100, name: '未完成', itemStyle: { color: '#409EFF' } }
            ],
            label: {
              show: false
            }
          }]
        }
        personalPieChart.setOption(personalPieOption)
  
        this.charts = [lineChart, deptPieChart, personalPieChart]
  
        // Handle window resize
        window.addEventListener('resize', () => {
          this.charts.forEach(chart => chart.resize())
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .execution-analysis {
    padding: 24px;
    background-color: #f0f2f5;
  }
  
  .metric-cards {
    margin-bottom: 24px;
  }
  
  .metric-card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }
  
  .metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    font-size: 24px;
    color: #fff;
  }
  
  .metric-icon.red {
    background-color: #F56C6C;
  }
  
  .metric-content {
    flex: 1;
  }
  
  .metric-value {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 8px;
  }
  
  .metric-label {
    color: #8c8c8c;
    font-size: 14px;
  }
  
  .chart-card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }
  
  .chart-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    color: #000000d9;
  }
  
  .line-chart {
    height: 300px;
  }
  
  .pie-chart {
    height: 300px;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    color: #000000d9;
  }
  
  .legend {
    display: flex;
    gap: 16px;
  }
  
  .legend-item {
    display: flex;
    align-items: center;
    font-size: 12px;
  }
  
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
  }
  
  .dot.blue {
    background-color: #409EFF;
  }
  
  .dot.green {
    background-color: #67C23A;
  }
  
  .progress-section {
    padding: 20px;
  }
  
  .progress-title {
    margin-bottom: 20px;
    font-size: 14px;
    color: #000000d9;
  }
  
  .progress-item {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
  }
  
  .progress-item .label {
    width: 100px;
    font-size: 14px;
    color: #000000d9;
  }
  
  .progress-item .value {
    margin-left: 16px;
    font-size: 14px;
    color: #000000d9;
  }
  
  :deep(.el-progress-bar__outer) {
    flex: 1;
    margin: 0 16px;
  }
  
  :deep(.el-radio-button__inner) {
    padding: 8px 15px;
  }
  </style>